<template>
  <view>
    <uni-nav-menu :active="showActive" activeKey="to" :activeTextColor="activeTextColor" :uniqueOpened="uniqueOpened"
      @select="onSelect">
      <uni-menu-sidebar :data="menus"></uni-menu-sidebar>
    </uni-nav-menu>
  </view>
</template>

<script>
  import {
    mapActions
  } from 'vuex'
  import {
    buildMenus
  } from './util.js'
  export default {
    data() {
      return {
        famliy: [],
      };
    },
    props: {
      // 当前激活菜单的 url
      value: {
        type: String,
        default: ''
      },
      // 当前激活菜单的文字颜色
      activeTextColor: {
        type: String,
        default: '#42B983'
      },
      // 是否只保持一个子菜单的展开
      uniqueOpened: {
        type: Boolean,
        default: false
      },
      menus: {
        type: Array,
        default () {
          return []
        }
      }
    },
    computed: {
      showActive() {
        if (this.value == "/") {
          return this.value;
        }
        let result = this.getValidMenuItem(this.value, this.menus)
        return result
      },
    },
    watch: {
      // #ifdef H5
      menus: {
        immediate: true,
        handler(newVal, oldVal) {
          // const item = this.menus.find(m => m.value === this.$route.path)
          // 设置面包屑
          // if (item) {
          this.famliy = [];
          this.getMenuAncestor(this.$route.fullPath, newVal)
          this.setRoutes && this.setRoutes(this.famliy)
          // item && this.setRoutes && this.setRoutes(this.famliy)
          // }
        }
      },
      // #endif
      $route: {
        immediate: false,
        handler(val, old) {
          if (val.fullPath !== old.fullPath) {
            this.famliy = []
            this.getMenuAncestor(val.fullPath, this.menus)
            this.setRoutes && this.setRoutes(this.famliy)
          }
        }
      }
    },

    methods: {
      ...mapActions({
        setRoutes: 'app/setRoutes'
      }),
      getValidMenuItem(path, menus) {
        for (let item of menus) {
          if (this.checkSameUrl(path, item.to)) {
            return item.type !== "page" ? item.to : true;
          }

          if (item.children) {
            let result = this.getValidMenuItem(path, item.children)

            if (result === true) {
              return item.to;
            }
            if (result) {
              return result;
            }
          }
        }
        return false
      },
      onSelect(menu) {
        this.famliy = []
        this.getMenuAncestor(menu.to, this.menus)
        this.emit(menu)
      },
      emit(menu) {
        this.$emit('select', menu, this.famliy)
        this.$emit('input', menu.to)
      },

      getMenuAncestor(path, menus) {

        for (let menu of menus) {

          let flag = false;

          if (menu.children) {
            flag = this.getMenuAncestor(path, menu.children)
          }

          if (flag || this.checkSameUrl(path, menu.to)) {
            this.famliy.unshift(menu)
            return true
          }
        }

        return false;
      }
    },
  }
</script>

<style>

</style>